<html>
<head>
  <title>VSCode 2.1——前端常用插件</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/607344 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 12pt;
    }
  </style>
</head>
<body>
<a name="1821"/>
<h1>VSCode 2.1——前端常用插件</h1>

<div>
<span><div><div><span style="font-weight: bold;">1    简介</span></div><div><br/></div><div><span style="font-weight: bold;">2    安装方法</span></div><div><img src="VSCode 2.1——前端常用插件_files/Image.png" type="image/png" data-filename="Image.png"/></div><div><br/></div><div><span style="font-weight: bold;">3    插件</span></div><div style="margin-left: 40px;"><span style="font-weight: bold;">3.1    基本插件</span></div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 259px;"></col><col style="width: 360px;"></col></colgroup><tbody><tr><td style="width: 259px; padding: 8px; border: 1px solid;"><div>插件</div></td><td style="width: 360px; padding: 8px; border: 1px solid;"><div>作用</div></td></tr><tr><td style="width: 259px; padding: 8px; border: 1px solid;"><div>Chinese (Simplified) Language Pack for Visual Studio Code</div></td><td style="width: 360px; padding: 8px; border: 1px solid;"><div>中文简体语言包</div></td></tr><tr><td style="width: 259px; padding: 8px; border: 1px solid;"><div>Auto Close Tag</div></td><td style="width: 360px; padding: 8px; border: 1px solid;"><div>自动添加HTML / XML关闭标签</div></td></tr><tr><td style="width: 259px; padding: 8px; border: 1px solid;"><div>Auto Rename Tag</div></td><td style="width: 360px; padding: 8px; border: 1px solid;"><div>自动重命名配对的HTML / XML标签</div></td></tr><tr><td style="width: 259px; padding: 8px; border: 1px solid;"><div>Image Preview</div></td><td style="width: 360px; padding: 8px; border: 1px solid;"><div>鼠标移到路径里显示图像预览</div></td></tr><tr><td style="width: 259px; padding: 8px; border: 1px solid;"><div>Path Intellisense</div></td><td style="width: 360px; padding: 8px; border: 1px solid;"><div>路径自动补全</div></td></tr><tr><td style="width: 259px; padding: 8px; border: 1px solid;"><div><br/></div></td><td style="width: 360px; padding: 8px; border: 1px solid;"><div><br/></div></td></tr><tr><td style="width: 259px; padding: 8px; border: 1px solid;"><div>VSCode Great Icons</div></td><td style="width: 360px; padding: 8px; border: 1px solid;"><div>小图标区分不同的文件类型</div></td></tr><tr><td style="width: 259px; padding: 8px; border: 1px solid;"><div>Markdown Preview Enhanced</div></td><td style="width: 360px; padding: 8px; border: 1px solid;"><div>实时预览markdown，markdown使用者必备</div></td></tr><tr><td style="width: 259px; padding: 8px; border: 1px solid;"><div>Code Runner</div></td><td style="width: 360px; padding: 8px; border: 1px solid;"><div>非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等 安装完成后，右上角会出现：▶</div></td></tr><tr><td style="width: 259px; padding: 8px; border: 1px solid;"><div>Git History</div></td><td style="width: 360px; padding: 8px; border: 1px solid;"><div>查看git日志以及图表和详细信息</div></td></tr><tr><td style="width: 259px; padding: 8px; border: 1px solid;"><div>Guides</div></td><td style="width: 360px; padding: 8px; border: 1px solid;"><div>代码的标签对齐线</div></td></tr><tr><td style="width: 259px; padding: 8px; border: 1px solid;"><div>Bracket Pair Colorizer</div></td><td style="width: 360px; padding: 8px; border: 1px solid;"><div>给括号加上不同的颜色，便于区分不同的区块</div></td></tr><tr><td style="width: 259px; padding: 8px; border: 1px solid;">koroFileHeader</td><td style="width: 360px; padding: 8px; border: 1px solid;"><div>注解工具</div><div>不要自动添加代码：</div><div>&quot;fileheader.customMade&quot;: {</div><div>    &quot;autoAdd&quot;:false</div><div>  },</div></td></tr></tbody></table><div style="margin-left: 40px;">3.2    html-css-js</div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 259px;"></col><col style="width: 366px;"></col></colgroup><tbody><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>HTML Snippets</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div>代码自动填充，注意要配置文件关联！</div><div><a href="https://blog.csdn.net/weixin_42546688/article/details/97138984">https://blog.csdn.net/weixin_42546688/article/details/97138984</a></div></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>HTML Boilerplate</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div>提供生成标准HTML样板代码</div></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>intelliSense for CSS class names in HTML</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div>项目中 css 文件里的名称智能提示在 html 中</div></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>JavaScript (ES6) code snippets</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div>es6代码片段</div></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>Live Server</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div>浏览器实时刷新</div></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>ESLint</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div>sLint可以帮助我们检查Javascript编程时的语法错误。</div></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div><br/></div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div><br/></div></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>jQuery Code Snippets</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div>jq代码段提示</div></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>open in browser</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div>浏览器中打开html</div></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>Color Info</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div>这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了</div></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>Prettier - Code formatter</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div>只关注格式化，并不具有eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown</div></td></tr></tbody></table><div><br/></div><div style="margin-left: 40px;"></div><div style="margin-left: 40px;">3.3    vue</div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 259px;"></col><col style="width: 366px;"></col></colgroup><tbody><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>Vue VS Code Extension Pack</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div>Vue 相关的插件</div></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>VueHelper</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div>Vue 相关的插件</div></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>Vue VSCode Snippets</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div>Vue 语法模板提醒</div><div>输入vbase 生成vue模板</div></td></tr></tbody></table><div style="margin-left: 40px;">3.4    Scss</div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 259px;"></col><col style="width: 366px;"></col></colgroup><tbody><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>Sass</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div><br/></div></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); width: 259px; padding: 8px;"><div>Live sass Compiler</div></td><td style="border: 1px solid rgb(204, 204, 204); width: 366px; padding: 8px;"><div><br/></div></td></tr></tbody></table><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div></div><div><br/></div></span>
</div></body></html> 